<template>
  	<div>
      <!-- 全局提示框 -->
      <transition-group name="fade">
        <div name='fade' v-for="item in successMessage" :key='item.key' class="dialog-tips">
            <span>{{item.txt}}</span>
        </div>
      </transition-group>
      
      <transition-group name="fade">
        <div v-for="item in errorMessage" :key='item.key' class="dialog-tips error">
            <span>{{item.txt}}</span>
        </div>
      </transition-group>
  	</div>
</template>
<script>
export default {
  data() {
    return {
      successMessage: [],
      errorMessage:[],
      type:'success',
    };
  },
};
</script>
<style lang="stylus" scoped>
$Height = 35px

.dialog-tips
    position fixed
    z-index 999
    width 100vw
    height $Height
    background-color rgba(123,210,57,0.85)
    color white
    border-radius 0 0 3px 3px
    left 50%
    top 0
    transform translate(-50%,0)
    display flex
    justify-content center
    transition all 0.2s
    align-items center
    box-sizing border-box
    padding 3px 5px
    &.error
        background-color rgba(255,70,0,0.85)
    span
    	font-size 14px
    	line-height $Height
      color red
// 通知动画
.fade-enter-active, .fade-leave-active 
  transform translate(-50%,0%)
.fade-enter, .fade-leave-to               /* .fade-leave-active below version 2.1.8 */ 
  transform translate(-50%,-100%)
</style>
